<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #body1 {
            background-color: #F0F0F0;
        }

        #main3 {
            margin-top: 20px;
            width: 90%;
            height: 600px;

        }

    </style>


    <script type="text/javascript" src="../../common/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../common/echars/echarts.min.js"></script>
    <!--
        1.引入jquery
        2.写一个echart 布局
        3.初始化echarts
    -->
    <script type="text/javascript">
        /**
         *会员增长趋势统计
         */
        var months;
        var values;
        $(function () {
            $.ajax({
                url: "/GetUserByNearYearServlet",
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    months = result.data.months;
                    values = result.data.values;
                    // 使用刚指定的配置项和数据显示图表。
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main3'));
                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: '堆叠区域图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['2019年', '2020年']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: [5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4]
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [

                            {
                                name: '2019年',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                data: [320, 332, 301, 334, 390, 330, 320, 0, 0, 0, 0, 0]
                            },
                            {
                                name: '2020年',
                                type: 'line',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                areaStyle: {},
                                data: [0, 0, 0, 0, 0, 0, 0, 0, 820, 932, 901, 934]
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            })
        })
    </script>
</head>
<body>

<body id="body1">
<center>
    <div id="main3"></div>
</center>
</body>

</body>
</html>